<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li>
            <label>登录名:</label>
            <input type="text" v-model="user.u_name">
            <span>验证信息</span>
        </li>
        <li>
            <label for="pwd">登陆密码:</label>
            <input type="password" id="pwd" v-model="user.u_pwd">
        </li>
        <li>
            <label>性别:</label>
            <input type="radio" value="男" name="sex" id="boy" v-model="user.u_sex"><label for="boy">男</label>
            <input type="radio" value="女" name="sex" id="girl" v-model="user.u_sex"><label for="girl">女</label>
        </li>
        <li>
            <label>爱好:</label>
            <input type="checkbox" name="likes" v-model="user.likes" value="睡觉1">睡觉1
            <input type="checkbox" name="likes" v-model="user.likes" value="睡觉2">睡觉2
            <input type="checkbox" name="likes" v-model="user.likes" value="睡觉3">睡觉3
            <input type="checkbox" name="likes" v-model="user.likes" value="睡觉4">睡觉4
        </li>
        <li>
            <label>籍贯:</label>
            <select v-model="user.jg">
                <option value="山东省">山东省</option>
                <option value="江苏省">江苏省</option>
            </select>
        </li>
        <li>
            <label>简介:</label>
            <textarea v-model="user.info" rows="5" cols="15">

            </textarea>
        </li>
        <li>
            <button @click="reg">注册</button>
        </li>
    </ul>
</div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            user:{
                u_name:'',
                u_pwd:'',
                u_sex:'男',
                likes:['睡觉3'],
                jg:'江苏省',
                info:''
            }
        },
        methods:{
            reg:function () {
                //可以提价数据给服务器
                let str=JSON.stringify(this.user);
                console.log(str);
                // localStorage.setItem()
            }
        }
    });
</script>
</body>
</html>